<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .list-ltem{display: inline-block; margin-right: 10px;
    background: red; border-radius: 50%;width: 25px;
    height: 25px; text-align: center;line-height: 25px; color: #fff;}
    .list-enter-active, .list-leave-active {transition: all 1s;}
    .list-enter, .list-leave-to {opacity: 0; transform: translateY(30px);}

    </style>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="add">++++</button>
        <button @click="remove">-----</button>
        <button @click="shuffle">646654</button>
        <transition-group name="list" tag="p">
            <span v-for="item in items" :key="item" class=
            "list-ltem">{{item}}</span>
        </transition-group>
    </div>
    <script>
        var vm = new Vue({el:'#app',data:{items:[1,2,3,4,5],nextNum:6},
    methods: {
        randomInedx(){
            return Math.floor(Math.random()*this.items.length)},
            add(){this.items.splice(this.randomInedx(),0,this.nextNum++)},
        remove(){ this.items.splice(this.randomInedx(),1)}    ,
        shuffle(){
            this.items=_.shuffle(this.items);
        }
    }
    
    })
    </script>
    
</body>
</html>
